// common reset use kissy reset
.reset(){
  * {box-sizing: border-box;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
  *:before, *:after {box-sizing: border-box;}
  html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
  fieldset, img { border:none; }
  img{display: block;border: 0;}
  address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
  ul,li,ol,dl,dt,dd { list-style:none; }
  input { padding-top:0; padding-bottom:0;}
  input::-moz-focus-inner { border:none; padding:0; }
  select, input { vertical-align:middle; }
  select, input, textarea { font-size:12px; margin:0; }
  input[type="text"], input[type="password"], textarea { outline-style:none; -webkit-appearance:none; }
  textarea { resize:none; }
  input,textarea,select{background: none; border: none;outline: none;}
  input::-ms-clear, input::-ms-reveal {display: none;}
  table { border-collapse:collapse; }
  code,kbd,pre,samp {font-family: @code-family;}
  a { color:#666; text-decoration:none; }
  a:visited { color:#666; }
  a,label {blr:~'expression(this.onFocus=this.blur())'}
  a,label {outline:none;}
  body {
    font-family: @font-family;
    font-size: @font-size-small;
    line-height: @line-height-base;
    color: @text-color;
    background-color: @body-background;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

.user-select(@select: none) {
  -webkit-user-select: @select;
     -moz-user-select: @select;
      -ms-user-select: @select;
          user-select: @select;
}
.tab-focus() {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
          box-shadow: @shadow;
}

.box-sizing(@boxmodel: border-box) {
  -webkit-box-sizing: @boxmodel;
     -moz-box-sizing: @boxmodel;
          box-sizing: @boxmodel;
}


.size(@width; @height) {
  width: @width;
  height: @height;
}

.square(@size) {
  .size(@size; @size);
}

.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// 颜色突出
.text-emphasis-variant(@color) {
  color: @color;
  &:hover,
  &:focus {
    color: darken(@color, 10%);
  }
}
// 背景突出
.bg-variant(@color) {
  background-color: @color;
  &:hover,
  &:focus {
    background-color: darken(@color, 10%);
  }
}

// radius
.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

// 可调整大小的文本域
.resizable(@direction: both) {
  resize: @direction;
  overflow: auto;
}

//三角
.triangle-common(@w) {
  border-style:dashed;
  border-color:transparent;
  border-width:@w;
  width: 0;
  height: 0;
  overflow:hidden;
  display: inline-block;
  vertical-align: middle;
}
.triangle (top,@w:5px,@color:#ccc){
 .triangle-common(@w);
  border-bottom: @w solid @color;
  border-top-width:0;
}
.triangle (bottom,@w:5px,@color:#ccc){
  .triangle-common(@w);
  border-top: @w solid @color;
  border-bottom-width:0;
}
.triangle (left,@w:5px,@color:#ccc){
  .triangle-common(@w);
  border-right: @w solid @color;
  border-left-width:0;
}
.triangle (right,@w:5px,@color:#ccc){
  .triangle-common(@w);
  border-left: @w solid @color;
  border-right-width:0;
}

//浮动
.fl(@f:left;){
  float: @f;
}
.fr(@f:right){
  float: @f;
}
//定位
.rel(@rel:relative){
  position: @rel;
}
.abs(@abs:absolute){
  position: @abs;
}
.fix(@fix:fixed){
  position: @fix;
}
//定位居中
.pos-mid(@w:600px,@h:360px,@pos:absolute){
  width: @w;
  height: @h;
  position: @pos;
  left: 50%;
  top: 50%;
  margin-left: -@w / 2;
  margin-top: -@h / 2;
}
.pos-mid-auto(){
  width: auto;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
//块元素水平居中
.box-mid(){
  display: block;
  margin-left: auto;
  margin-right: auto;
}
// 行内元素垂直居中
.line-mid(@h) {
  height: @h;
  line-height: @h;
}
//行内元素水平居中
.align(@cen:center) {
  text-align: @cen;
}


// 文字加粗
.font-wb(@w:bold){
  font-weight: @w;
}
//font size
.fontsize(@p: 14px){
  font-size: @p;
}
// fix chrome 12px bug, support ie
.fontsize-under12(@size, @rotate: 0deg) {
  display: inline-block;
  @font-scale: unit(@size / @font-size-base);
  font-size: @font-size-base;
  font-size: ~"@{size} \9"; // ie8-9
  transform: scale(@font-scale) rotate(@rotate);
  :root & {
    font-size: @font-size-base; // reset ie9 and above
  }
}

//显示与隐藏
.show(@d: block) {
  display: @d;
}
.hide() {
  display: none;
}

.mask() {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(55, 55, 55, 0.6);
  height: 100%;
  z-index: 99;

  &-hidden {
      display: none;
  }
}

.transition(@attr: all, @dur: .2s, @type: ease-in-out) {
  -webkit-transition: @attr @dur @type; /* Safari 和 Chrome */
  -moz-transition: @attr @dur @type; /* Firefox 4 */
  -o-transition: @attr @dur @type; /* Opera */
  transition: @attr @dur @type;
}


// 渐变
.horizontal(@startColor: #aaa, @endColor: #000) {
  background-color: @endColor;
  background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
  background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
  background-repeat: repeat-x;
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.vertical(@startColor: #aaa, @endColor: #000) {
  background-color: @endColor;
  background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
  background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
  background-repeat: repeat-x;
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.directional(@startColor: #aaa, @endColor: #000, @deg: 45deg) {
  background-color: @endColor;
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
  background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
  background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
}
.horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
  background-color: mix(@midColor, @endColor, 80%);
  background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
  background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
  background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
  background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
  background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
  background-repeat: no-repeat;
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
}
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
  background-color: mix(@midColor, @endColor, 80%);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
  background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
  background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
  background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
  background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
  background-repeat: no-repeat;
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
}
.radial(@innerColor: #aaa, @outerColor: #000) {
  background-color: @outerColor;
  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
  background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
  background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
  background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
  background-image: radial-gradient(circle, @innerColor, @outerColor);
  background-repeat: no-repeat;
}
.striped(@color1: rgba(255,255,255,.15), @color2: #aaa, @angle: 45deg) {
  background-color: @color2;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, @color1), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, @color1), color-stop(.75, @color1), color-stop(.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(@angle, @color1 25%, transparent 25%, transparent 50%, @color1 50%, @color1 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(@angle, @color1 25%, transparent 25%, transparent 50%, @color1 50%, @color1 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(@angle, @color1 25%, transparent 25%, transparent 50%, @color1 50%, @color1 75%, transparent 75%, transparent);
  background-image: linear-gradient(@angle, @color1 25%, transparent 25%, transparent 50%, @color1 50%, @color1 75%, transparent 75%, transparent);
}